<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-button class="margin-right" type="text" icon="el-icon-refresh" @click="reloadAllConnects"/>

        <el-select v-model="connParam.connName" @change="switchConnect" size="small">
          <el-option v-for="connect in connects" :key="connect" :value="connect" :label="connect"/>
        </el-select>
        <el-select v-model="connParam.index" @change="switchIndex"  size="small"  style="width: 60px">
          <el-option v-for="db in dbs" :key="db" :value="db" :label="db" />
        </el-select>
      </el-col>
    </el-row>

    <el-tabs :active-name="tabs.activeTabName" @tab-click="switchTab">
      <el-tab-pane name="dashboard" label="监控总览">
        <dashboard ref="dashboard" :conn-param="connParam" @onConnInfoChange="changeDbs"/>
      </el-tab-pane>
      <el-tab-pane name="keyscan" label="数据查询">
        <keyscan ref="keyscan" :conn-param="connParam"/>
      </el-tab-pane>
      <el-tab-pane name="treekey" label="树形KEY">
        <treekey ref="treekey" :conn-param="connParam"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import dashboard from "@/views/monitor/redis/dashboard";
import keyscan from "@/views/monitor/redis/keyscan";
import treekey from "@/views/monitor/redis/treekey";
import core from "@/api/core";
import redis from "@/api/redis";

export default {
  name: "redisMain",
  components:{dashboard,keyscan,treekey},
  data(){
    return {
      connParam:{
        connName: null,
        index: 0
      },
      connects:[],
      tabs: {
        activeTabName: 'keyscan'
      },
      dbs: [0]
    }
  },
  methods:{
    changeDbs(connInfo){
      // this.dbs = connInfo.redisRunMode;
      if (!connInfo) {
        this.dbs =  [0];
        return ;
      }
      if (connInfo.redisRunMode === 'cluster'){
        this.dbs =  [0] ;
      }
      if (connInfo.masterNodes.length === 0){
        this.dbs =  [0];
      }

      let masterNode = connInfo.masterNodes[0];

      let array = [];
      for (let i = 0; i < masterNode.dbs; i++) {
        array.push(i);
      }
      this.dbs = array;
    },
    reloadAllConnects(){
      core.moduleConnects('redis').then(res => {
        this.connects = res.data
        if (this.connects && this.connects.length > 0) {
          this.switchConnect(this.connects[0])
        }
      })
    },
    switchIndex(index){
      this.connParam.index = index;
      if (this.$refs[this.tabs.activeTabName]){
        this.$refs[this.tabs.activeTabName].init();
      }
    },
    switchConnect(connect){
      this.connParam.connName = connect;
      // 初始化 index 为 0 , 这对于集群模式和单机模式都适合
      this.connParam.index = 0 ;

      // 初始化加载默认 tab
      this.switchTab({name:this.tabs.activeTabName});
      if (this.tabs.activeTabName !== 'dashboard'){
        // 必须加载 dashboard
        this.$refs.dashboard.init();
      }

    },
    switchTab(tab,event){
      this.tabs.activeTabName = tab.name;
      this.$nextTick(() => {
        this.$refs[tab.name].init();
      })
    }
  },
  mounted() {
    this.reloadAllConnects();
  },
  computed:{

  }
}
</script>

<style scoped>

</style>
